<template>
  <div style="width: 1000px;margin: 20px auto">
    <el-form :model="editAvatarForm" ref="editAvatarForm" label-width="20px">
      <el-form-item>
        <div class="picture-list">
          <el-upload
              name="imageFile"
              class="picture-uploader"
              :action="uploadAvatar"
              :show-file-list="false"
              :on-success="handleUploadSuccess">
            <i class="el-icon-upload picture-uploader-icon"></i>
            <div class="picture-uploader-text">仅允许上传 <i>JPG</i> / <i>PNG</i> 格式的图片</div>
            <div class="picture-uploader-text">仅允许上传不超过 <i>1MB</i> 的图片</div>
          </el-upload>
          <div class="picture-item">
            <el-image class="image"
                      :src="editAvatarForm.avatar" fit="cover"></el-image>
          </div>
        </div>
      </el-form-item>

    </el-form>
  </div>
</template>
<script>
import global from '../../Global'
let preAdminUrl = global.preAdmins ;
let preResourceUrl = global.preResources ;
export default {
  data() {
    return {
      uploadAvatar: preResourceUrl+'/upload/image/avatar',
      editAvatarForm: {
        avatar: '',
        oldUrl: ''
      }
    }
  },
  methods: {
    //头像上传成功
    handleUploadSuccess(response){
      this.editAvatarForm.oldUrl =  this.editAvatarForm.avatar;
      this.editAvatarForm.avatar = response.data.url;

      let url = preAdminUrl + "/" + this.editAvatarForm.id + "/updateAvatar";
      let formData = this.qs.stringify(this.editAvatarForm);

      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({'headers': {'Authorization': localJwt}})
          .post(url, formData).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.handleDeletePicture();
          this.$router.go(0)
        }else if(jsonResult.state == 40400 || jsonResult.state == 40100 ){
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
              localStorage.removeItem("localJwt");
              this.$router.push("/webLogin");
            }
          });
        }else {
          this.$alert(jsonResult.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    //物理删除服务器保存头像
    handleDeletePicture(){
      if(this.editAvatarForm.oldUrl == ''){
        return;
      }
      let url = preResourceUrl + "/remove/image/avatar";
      let formData = this.qs.stringify(this.editAvatarForm);

      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({'headers': {'Authorization': localJwt}})
          .post(url, formData).then((response) => {
        let jsonResult = response.data;
        if(jsonResult.state == 20000){
          console.log("图片物理删除成功!");

        }else{
          console.log("图片物理删除失败!");
        }
      });
    },
    //获取当事人信息
    loadLoginPrincipal(){
      let url = preAdminUrl + "/index";

      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({'headers': {'Authorization': localJwt}})
          .get(url).then((response) => {
        let jsonResult = response.data;
        if(jsonResult.state == 20000){
          this.editAvatarForm = jsonResult.data;
        }else if(jsonResult.state == 40400 || jsonResult.state == 40100){
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
              this.dialogFormVisible = false;
              localStorage.removeItem("localJwt");
              this.$router.push("/webLogin");
            }
          });
        }else{
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    }
  },
  mounted() {
    this.loadLoginPrincipal();
  }
}
</script>